import { LocalizationContext } from "../../core";

import SearchIcon from "./SearchIcon";
import { FC, ReactElement, useContext } from "react";

interface RenderChildren {
  icon: ReactElement;
  label: string;
  onClick(): void;
}

interface ShowSearchPopoverDecoratorProps {
  children(props: RenderChildren): ReactElement;
  onClick(): void;
}

const ShowSearchPopoverDecorator: FC<ShowSearchPopoverDecoratorProps> = ({
  children,
  onClick,
}) => {
  const l10n = useContext(LocalizationContext);
  const label = (l10n && l10n.search ? l10n.search.search : "Search") as string;
  const icon = <SearchIcon />;

  return children({ icon, label, onClick });
};

export default ShowSearchPopoverDecorator;
